<template>
  <div class="default-main ba-table-box">
    <TableHeader
      :buttons="['refresh', 'comSearch', 'columnDisplay']"
      @action="baTable.onTableHeaderAction"
    />
    <Table ref="tableRef" :pagination="false" @action="baTable.onTableAction" />
  </div>
</template>
<script lang="ts" setup>
import { ref, inject, onMounted, provide, watch, nextTick } from "vue";
import baTableClass from "@/utils/baTable";
import { baTableApi } from "@/utils/common";
import { DeviceMLongRange } from "@/api/backend/index";
import Table from "@/components/table/index.vue";
import TableHeader from "@/components/table/header/index.vue";
import type { FormInstance, FormRules, FormItemRule } from "element-plus";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { useDeviceWarnSet } from "@/store/backend/DeviceM/warnSet";
import type { TableRow, TableColumn } from "@/utils/baTable"; //表格列行类型
import { useLongRange } from "@/store/backend/DeviceM/longRange";
import { useRoute } from "vue-router";

const { proxy } = useCurrentInstance(); //mitt
const tableRef = ref();
const warnSet = useDeviceWarnSet();
const LR = useLongRange();
const navTabs = inject("navTabs") as any;
const route = useRoute();

//字段显隐记忆功能
const filedShowOff = (filter: any) => {
  if ((navTabs as any).columnDisplayStoreMap) {
    return (navTabs as any).columnDisplayStoreMap.get(
      route.path + "/" + filter
    );
  }
  return true;
};
// 每页个数记忆功能
const pageSizeKeep = () => {
  if ((navTabs as any).pageSizeMap) {
    return (navTabs as any).pageSizeMap.get(route.path + DeviceMLongRange)
      ? (navTabs as any).pageSizeMap.get(route.path + DeviceMLongRange)
      : 10;
  }
  return 10;
};

const baTable = new baTableClass(
  new baTableApi(DeviceMLongRange), //this.api = api菜单管理相关
  {
    pk: "id", //id
    column: [
      // { type: "selection", align: "center", operator: false },
      {
        show: filedShowOff("id"),
        label: "ID",
        prop: "id",
        align: "center",
        width: 50,
        operator: false,
      },
      {
        show: filedShowOff("lowtrange"),
        label: "温度量程下限值",
        prop: "lowtrange",
        align: "center",
      },
      {
        show: filedShowOff("uptrange"),
        label: "温度量程上限值",
        prop: "uptrange",
        align: "center",
      },
      {
        show: filedShowOff("lowprange"),
        label: "压差量程下限值",
        prop: "lowprange",
        align: "center",
      },
      {
        show: filedShowOff("upprange"),
        label: "压差量程上限值",
        prop: "upprange",
        align: "center",
      },
      {
        show: filedShowOff("lowfrange"),
        label: "风速量程下限值",
        prop: "lowfrange",
        align: "center",
      },
      {
        show: filedShowOff("upfrange"),
        label: "风速量程上限值",
        prop: "upfrange",
        align: "center",
      },
      {
        show: filedShowOff("createTime"),
        label: "创建时间",
        prop: "createTime",
        width: "160",
        align: "center",
        operator: false,
      },
      {
        label: "操作",
        align: "center",
        render: "buttons",
        // fixed: "right",
        buttons: [
          {
            render: "tipButton",
            name: "editLR",
            title: "远程配置详情",
            text: "",
            type: "primary",
            icon: "iconfont icon-pencil",
            class: "table-row-edit",
            disabledTip: false,
            // 按钮是否显示，请返回布尔值
            display: (row: TableRow, field: TableColumn) => {
              return false;
            },
            // 按钮是否禁用，请返回布尔值
            disabled: (row: TableRow, field: TableColumn) => {
              return false;
            },
            attr: {},
          },
          {
            render: "confirmButton",
            name: "removeLR",
            title: "删除",
            text: "",
            type: "danger",
            icon: "el-icon-DeleteFilled",
            class: "table-row-delete",
            popconfirm: {
              confirmButtonText: "删除",
              cancelButtonText: "取消",
              confirmButtonType: "danger",
              title: "确定删除所选项吗",
            },
            disabledTip: false,
            // 按钮是否显示，请返回布尔值
            display: (row: TableRow, field: TableColumn) => {
              return false;
            },
            // 按钮是否禁用，请返回布尔值
            disabled: (row: TableRow, field: TableColumn) => {
              return false;
            },
            attr: {},
          },
        ],
        operator: false,
      },
    ],
    filter: {
      pageSize: pageSizeKeep(),
    },
  },
  {
    defaultItems: {},
  },
  {
    getList: () => {
      baTable.api
        .list("", { eid: LR.$state.id })
        .then((res: any) => {
          baTable.table.data = res.rows;
          baTable.table.total = res.total;
        })
        .catch((err) => {});
      return false;
    },
  },
  {}
);

// 监听pinia中的id变化
// LR.$subscribe((state) => {
//   if ((state.events as any).key === "id") {
//     baTable.getList("");
//   }
// });

//获取设备的指令配置列表信息
proxy.eventBus.on("changLRId", () => {
  baTable.getList("");
  setTimeout(() => {
    refreshAddBtn();
  }, 1000);
});
//修改远程运维配置
const emit = defineEmits(["onPutLR"]);
const editWarn = (name: string, row: anyObj) => {
  //将详情赋值给添加表单
  emit("onPutLR", row);
};
const removeLR = (name: string, row: anyObj) => {
  LR.deleteLR(row)
    .then((res) => {
      baTable.getList("");
    })
    .catch((err) => {
      baTable.getList("");
    });
};

/**
 * 表格内的按钮响应
 * @param name 按钮name
 * @param row 被操作行数据
 */
proxy.eventBus.on(
  "onTableButtonClick",
  (data: { name: string; row: TableRow }) => {
    if (data.name == "editLR") {
      //编辑
      LR.opera = "edit";
      editWarn(data.name, data.row);
    } else if (data.name == "removeLR") {
      //删除
      removeLR(data.name, data.row);
    }
  }
);
onMounted(() => {
  //将table的ref给到table类
  baTable.table.ref = tableRef.value;
  baTable.mount();
  baTable.getList(DeviceMLongRange);
  setTimeout(() => {
    refreshAddBtn();
  }, 1000);
});
const refreshAddBtn = () => {
  if (baTable.table.data!.length > 0) {
    proxy.eventBus.emit("noAdd");
  } else {
    proxy.eventBus.emit("isAdd");
  }
};
// 实例化表格后，将 baTable 的实例提供给上下文
provide("baTable", baTable);

proxy.eventBus.on("refreshLR", () => {
  baTable.getList("");
});
</script>
<style lang="scss" scoped>
.ba-operate-dialog {
  .ba-operate-form {
    .formTip {
      margin-left: 120px;
    }

    .el-form {
      :deep(.el-form-item__content) {
        margin-top: 10px;
      }
    }
  }
}

@media screen and (max-width: 460px) {
  .ba-operate-dialog {
    .ba-operate-form {
      .formTip {
        margin-left: 0px;
      }

      .el-form {
        :deep(.el-form-item__content) {
          margin: 10px 0 0 0;
        }
      }
    }
  }
}
</style>
